<script lang="ts" setup>
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import {
  Button,
  Card,
  Col,
  Row,
  Table,
  Tag,
  Space,
  Modal,
  message,
  Statistic,
  Progress,
  Divider,
} from 'ant-design-vue';

// 版本管理相关
const versionList = ref<any[]>([]);
const versionModalVisible = ref(false);
const currentResource = ref<any>({});

// 依赖关系相关
const dependencyList = ref<any[]>([]);
const dependencyModalVisible = ref(false);

// 跨业务复用相关
const reuseList = ref<any[]>([]);
const reuseStats = ref<any>({});
const reuseModalVisible = ref(false);

// 加载版本数据
const loadVersionData = async (resourceId: string) => {
  try {
    versionList.value = [
      {
        id: 'v1',
        version: '1.0.0',
        status: 'ACTIVE',
        author: '张三',
        createTime: '2024-01-15 10:30:00',
        description: '初始版本',
        downloadCount: 156,
      },
      {
        id: 'v2',
        version: '1.1.0',
        status: 'ACTIVE',
        author: '李四',
        createTime: '2024-02-20 14:20:00',
        description: '功能增强版本',
        downloadCount: 89,
      },
    ];
  } catch (error) {
    message.error('加载版本数据失败');
  }
};

// 加载依赖数据
const loadDependencyData = async (resourceId: string) => {
  try {
    dependencyList.value = [
      {
        id: 'dep1',
        name: '基础信息组件',
        type: 'FORM_COMPONENT',
        version: '1.0.0',
        impact: 'HIGH',
        usageCount: 45,
      },
      {
        id: 'dep2',
        name: '验证规则组件',
        type: 'VALIDATION_COMPONENT',
        version: '2.1.0',
        impact: 'MEDIUM',
        usageCount: 32,
      },
    ];
  } catch (error) {
    message.error('加载依赖数据失败');
  }
};

// 加载复用数据
const loadReuseData = async (resourceId: string) => {
  try {
    reuseStats.value = {
      totalReuse: 45,
      activeReuse: 32,
      businessTypes: [
        { type: '酒店管理',count: 15,percentage: 33.3 },
        { type: '公寓管理',count: 12,percentage: 26.7 },
        { type: '温泉洗浴',count: 8,percentage: 17.8 },
      ],
    };

    reuseList.value = [
      {
        id: 'reuse1',
        businessType: '酒店管理',
        businessName: '华美酒店',
        reuseTime: '2024-03-15 16:30:00',
        status: 'ACTIVE',
        usageCount: 156,
        performance: 95,
      },
      {
        id: 'reuse2',
        businessType: '公寓管理',
        businessName: '阳光公寓',
        reuseTime: '2024-03-10 14:20:00',
        status: 'ACTIVE',
        usageCount: 89,
        performance: 88,
      },
    ];
  } catch (error) {
    message.error('加载复用数据失败');
  }
};

// 打开版本管理
const openVersionManager = (resource: any) => {
  currentResource.value = resource;
  versionModalVisible.value = true;
  loadVersionData(resource.id);
};

// 打开依赖管理
const openDependencyManager = (resource: any) => {
  currentResource.value = resource;
  dependencyModalVisible.value = true;
  loadDependencyData(resource.id);
};

// 打开复用管理
const openReuseManager = (resource: any) => {
  currentResource.value = resource;
  reuseModalVisible.value = true;
  loadReuseData(resource.id);
};

// 工具函数
const getVersionStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    ACTIVE: 'green',
    DRAFT: 'orange',
    DEPRECATED: 'red',
  };
  return colors[status] || 'default';
};

const getVersionStatusText = (status: string) => {
  const texts: Record<string, string> = {
    ACTIVE: '激活',
    DRAFT: '草稿',
    DEPRECATED: '已废弃',
  };
  return texts[status] || status;
};

const getImpactColor = (impact: string) => {
  const colors: Record<string, string> = {
    HIGH: 'red',
    MEDIUM: 'orange',
    LOW: 'green',
  };
  return colors[impact] || 'default';
};

const getImpactText = (impact: string) => {
  const texts: Record<string, string> = {
    HIGH: '高影响',
    MEDIUM: '中影响',
    LOW: '低影响',
  };
  return texts[impact] || impact;
};

const getPerformanceColor = (performance: number) => {
  if (performance >= 90) return 'green';
  if (performance >= 70) return 'orange';
  return 'red';
};

// 版本管理列配置
const versionColumns = [
  {
    title: '版本号',
    dataIndex: 'version',
    key: 'version',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '作者',
    dataIndex: 'author',
    key: 'author',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 160,
  },
  {
    title: '下载次数',
    dataIndex: 'downloadCount',
    key: 'downloadCount',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
  },
];

// 依赖关系列配置
const dependencyColumns = [
  {
    title: '依赖名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 120,
  },
  {
    title: '版本',
    dataIndex: 'version',
    key: 'version',
    width: 100,
  },
  {
    title: '影响程度',
    dataIndex: 'impact',
    key: 'impact',
    width: 100,
  },
  {
    title: '使用次数',
    dataIndex: 'usageCount',
    key: 'usageCount',
    width: 100,
  },
];

// 复用管理列配置
const reuseColumns = [
  {
    title: '业务类型',
    dataIndex: 'businessType',
    key: 'businessType',
    width: 120,
  },
  {
    title: '业务名称',
    dataIndex: 'businessName',
    key: 'businessName',
    width: 150,
  },
  {
    title: '复用时间',
    dataIndex: 'reuseTime',
    key: 'reuseTime',
    width: 160,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '使用次数',
    dataIndex: 'usageCount',
    key: 'usageCount',
    width: 100,
  },
  {
    title: '性能评分',
    dataIndex: 'performance',
    key: 'performance',
    width: 100,
  },
];

// 暴露方法给父组件
defineExpose({
  openVersionManager,
  openDependencyManager,
  openReuseManager,
});
</script>

<template>
  <div class="technical-resource-manager">
    <!-- 版本管理模态框 -->
    <Modal
      v-model:open="versionModalVisible"
      :title="`版本管理 - ${currentResource?.name || ''}`"
      width="1000px"
      :footer="null"
    >
      <div class="version-manager">
        <Row :gutter="16">
          <Col :span="16">
            <Card title="版本历史" :bordered="false">
              <Table
                :columns="versionColumns"
                :data-source="versionList"
                :pagination="false"
                row-key="id"
                size="small"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'status'">
                    <Tag :color="getVersionStatusColor(record.status)">
                      {{ getVersionStatusText(record.status) }}
                    </Tag>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Space>
                      <Button type="link" size="small"> 详情 </Button>
                      <Button type="link" size="small"> 回滚 </Button>
                    </Space>
                  </template>
                </template>
              </Table>
            </Card>
          </Col>
          <Col :span="8">
            <Card title="版本统计" :bordered="false">
              <div class="version-stats">
                <Statistic
                  title="总版本数"
                  :value="versionList.length"
                  :value-style="{ color: '#1890ff' }"
                />
                <Divider />
                <Statistic
                  title="激活版本"
                  :value="
                    versionList.filter((v) => v.status === 'ACTIVE').length
                  "
                  :value-style="{ color: '#52c41a' }"
                />
                <Divider />
                <Statistic
                  title="总下载次数"
                  :value="
                    versionList.reduce((sum, v) => sum + v.downloadCount, 0)
                  "
                  :value-style="{ color: '#722ed1' }"
                />
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>

    <!-- 依赖关系管理模态框 -->
    <Modal
      v-model:open="dependencyModalVisible"
      :title="`依赖关系管理 - ${currentResource?.name || ''}`"
      width="1000px"
      :footer="null"
    >
      <div class="dependency-manager">
        <Card title="依赖列表" :bordered="false">
          <Table
            :columns="dependencyColumns"
            :data-source="dependencyList"
            :pagination="false"
            row-key="id"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'impact'">
                <Tag :color="getImpactColor(record.impact)">
                  {{ getImpactText(record.impact) }}
                </Tag>
              </template>
            </template>
          </Table>
        </Card>
      </div>
    </Modal>

    <!-- 跨业务复用管理模态框 -->
    <Modal
      v-model:open="reuseModalVisible"
      :title="`跨业务复用管理 - ${currentResource?.name || ''}`"
      width="1000px"
      :footer="null"
    >
      <div class="reuse-manager">
        <Row :gutter="16">
          <Col :span="16">
            <Card title="复用记录" :bordered="false">
              <Table
                :columns="reuseColumns"
                :data-source="reuseList"
                :pagination="false"
                row-key="id"
                size="small"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'status'">
                    <Tag :color="record.status === 'ACTIVE' ? 'green' : 'red'">
                      {{ record.status === 'ACTIVE' ? '活跃' : '非活跃' }}
                    </Tag>
                  </template>
                  <template v-else-if="column.key === 'performance'">
                    <Progress
                      :percent="record.performance"
                      :stroke-color="getPerformanceColor(record.performance)"
                      size="small"
                    />
                  </template>
                </template>
              </Table>
            </Card>
          </Col>
          <Col :span="8">
            <Card title="复用统计" :bordered="false">
              <div class="reuse-stats">
                <Statistic
                  title="总复用数"
                  :value="reuseStats.totalReuse"
                  :value-style="{ color: '#1890ff' }"
                />
                <Divider />
                <Statistic
                  title="活跃复用"
                  :value="reuseStats.activeReuse"
                  :value-style="{ color: '#52c41a' }"
                />
                <Divider />
                <div class="business-type-stats">
                  <h4>业务类型分布</h4>
                  <div
                    v-for="item in reuseStats.businessTypes"
                    :key="item.type"
                    class="business-type-item"
                  >
                    <div class="business-type-info">
                      <span class="business-type-name">{{ item.type }}</span>
                      <span class="business-type-count">{{ item.count }}</span>
                    </div>
                    <Progress
                      :percent="item.percentage"
                      :show-info="false"
                      size="small"
                    />
                  </div>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
.technical-resource-manager {
  padding: 20px;
}

.version-manager,
.dependency-manager,
.reuse-manager {
  padding: 16px 0;
}

.version-stats {
  padding: 16px 0;
}

.reuse-stats {
  padding: 16px 0;
}

.business-type-stats h4 {
  margin-bottom: 16px;
  color: #1890ff;
}

.business-type-item {
  margin-bottom: 12px;
}

.business-type-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.business-type-name {
  font-size: 14px;
  color: #262626;
}

.business-type-count {
  font-size: 14px;
  color: #8c8c8c;
}
</style>
